<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--本地下载:  先下载  在引入  再使用 -->
    <script src="../js/vue.js"></script>

    <!-- CDN -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
</head>
<body>
    <!-- 在没有使用vue之前 -> 它就是一个普通的文本 -->
    <div id="app">
        <p>
            message:{{message}} 
        </p>
        <p>
            count: {{count}}
        </p>
        <p>
            say:{{say()}}
        </p>
    </div>
</body>
<script>
    // 为了实现页面渲染时的优化操作  => 虚拟DOM和Diff算法

    // 虚拟DOM => 通过数组对象/对象数组的形式记录html结构  => Vue中存在render()方法 => 可以将传入的HTML结构解析为虚拟DOM

    // 初始DOM
    // var vDom = {
    //     tag:"div",
    //     attrs:{
    //         id:"#app",
    //     },
    //     children:[
    //         {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"message:{{message}}"}]},
    //         {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"count: {{count}}"}]},
    //         {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"say:{{say()}}"}]},
    //     ]
    // }

    // 解析1:
    var vDom1 = {
        tag:"div",
        attrs:{
            id:"#app",
        },
        children:[
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"message:hello world"}]},
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"count:1"}]},
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"say:你好"}]},
        ]
    }
    // new Vue() 初始化之后直接将 对应的vDom渲染为真实dom


    // 数据发生改变
    // vm.message = "Vue Hello";
    var vDom2 = {
        tag:"div",
        attrs:{
            id:"#app",
        },
        children:[
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"message:Vue Hello"}]},
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"count:1"}]},
            {tag:"p",attrs:{},children:[{tag:"",attrs:{},text:"say:你好"}]},
        ]
    }
    // 数据发生改变  => 生成了新的虚拟DOM   => 对比两个虚拟DOM之间发生的变化(diff算法),求出最优解 -> 在将修改后的内容更新到真实dom
    // 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。


  

    
    
    var vm = new Vue({   // 注意Vue中的绝大部分功能都是依赖于options(选项)参数实现的
        el:"#app",  //挂载的元素(css选择器)  => #app
        data:{      //挂载的数据  => 可以有多条(对象) -> 可以在挂载的元素内使用(对应数据名称使用)
            count:1,
            message:"hello world",
            msg:"你好"
        },
        methods:{   // 挂载的方法 => 执行既定的内容  -> 可以在挂载的元素内使用(对应函数名称使用)
            say:function(){
                console.log("this",this);  // 在Vue实例中methods,computed,watch中 方法的this都指向当前Vue实例
                // return "你好"
                return this.msg;
            }, 
        }
    })

    console.log(vm); //打印创建的vue实例(实例化对象)


    // 响应式:    => 当挂载的数据被修改之后,也会触发视图更新(挂载的元素内的html结构重新渲染)

    document.ondblclick = function(){
        // 通过$data放在挂载的数据 -> vm.$data.xxx
        // vm.$data.message = "hello Vue";
        // vm.$data.count = 100;
        // vm.$data.msg = "我也好";

        // 通过实例化对象访问数据  => 写法更简单
        vm.message = "Vue Hello";
        // vm.count = -100;
        // vm.msg = "大家好!";
    }






</script>
</html>